<template>
  <div>
<!--    数组遍历-->
    <ul>
<!--
  遍历对象 v-for=”(value, [key], [index]) in 对象”
  第一个是值，第二个是键，第三个是索引
  https://blog.csdn.net/zongmaomx/article/details/106786436
-->
      <li v-for="(item,index) in arr" :key="item">{{index+1}}-{{item}}</li>
    </ul>
<!--对象遍历-->
    <ul>
      <li v-for="(item,key,index) in obj" :key="item">{{index+1}}-{{key}}-{{item}}</li>
    </ul>
<!--    数组和对象的混合遍历-->
    <ul>
<!--      鼠标移入/移除事件-->
      <li :class="{on:item.on}"
          @mousemove="over(index)" @mouseout="out()"
          v-for="(item,index) in arrObj" :key="item">
        {{index}}-{{item.name}}-{{item.num}}-{{item.price}}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
        arr : ['商品1','商品2','商品3','商品4'],
        obj : {name:'zhansan',age:20,sex:'男'},
        arrObj :[
          {id:1,name:'手机',num:2,price:3000,on:false},
          {id:2,name:'电脑',num:3,price:1000,on:false},
          {id:3,name:'女装',num:5,price:500,on:false},
          {id:4,name:'男装',num:7,price:100,on:false},
        ]
    }
  },
  methods:{
    over(index){
      for (let i=0;i<this.arrObj.length;i++){
        if(index == i){
          this.arrObj[index].on = true;
        }
      }
    },
    out(){
      for (let i=0;i<this.arrObj.length;i++){
        this.arrObj[i].on = false;
      }
    },
  }
}
</script>

<style scoped>
  li{
    list-style: none;
  }
  .on{
    color: red;
  }
</style>